<template>
  <div class="login-form">
    <XForm :config="formConfig" ref="xFormRef" style="width: 100%;">
      
    </XForm>
    
    <div class="control">
      <a-button type="primary" @click="login">登录</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import XForm,{useFormHook} from '@/components/common/x-form/index.ts'
import type { FormPropsType } from '@/components/common/x-form/index.ts'
import { defineEmits, ref } from 'vue'
import type {ValidatedError} from '@arco-design/web-vue'
let emits=defineEmits(["login"])
const xFormRef = ref()
const formConfig = ref<FormPropsType>({
  autoLabelWidth:true,
  items: {
    account: {
      type: 'input',
      config: {
        label: '账号',
       
        rules: [{ required: true, message: 'account is required' }],
        style: {
    
        }
      },
      slotFormConfig: {
        modelValue: ''
      }
    },
    password: {
      type: 'input',
      config: {
        label: '密码',
        rules: [{ required: true, message: 'password is required' }],
        style: {
      
        }
      },
      slotFormConfig: {
        modelValue: ''
      }
    }
  }
})

let [formData]=useFormHook(formConfig)

function login() {
  xFormRef.value.FormRef.validate((errors: undefined | Record<string, ValidatedError>)=>{
    if(!errors){
      emits("login",formData.value)
    }
  })


}
</script>

<style scoped>
.login-form {
  width: 500px;
  margin: 0 auto;
  padding: 100px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.control{
  display: flex;
  flex-direction:row-reverse
}

h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

input {

  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #0056b3;
}
</style>